<template>
  <div class="MovieVideo">
    <div class="video-item">
      <div class="videoplayer">
        <video
          :id="VideoData.id"
          :src="VideoData.video.url"
          muted="true"
          @touchend="StopVideo(VideoData.id)"
        ></video>
        <img v-if="imgflag" class="video-img" :src="VideoData.video.imgUrl" width="100%" alt />

        <div v-if="flag" class="play-but" @touchend="PlayVideo(VideoData.id)"></div>
      </div>
      <div class="video-info">
        <div class="info-l">
          <img :src="VideoData.user.avatarurl" height="30px" />
          <span>{{VideoData.user.nickName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MovieVideo",
  data() {
    return {
      VideoData: [],
      imgflag: true,
      flag: true
    };
  },
  created() {
    this.VideoData = JSON.parse(this.$route.params.VideoID);
  },
  filters: {
    Timer(e) {
      var min = Math.floor(e / 60) % 60;
      var sec = e % 60;
      return (
        (min >= 10 ? min : "0" + min) + ":" + (sec >= 10 ? sec : "0" + sec)
      );
    }
  },
  methods: {
    PlayVideo(id) {
      this.flag = false;
      this.imgflag = false;
      let Video = document.getElementById(id);
      Video.play();
    },
    StopVideo(id) {
      let Video = document.getElementById(id);
      if (Video.paused) {
        Video.play();
        this.flag = false;
      } else {
        Video.pause();
        this.flag = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.video-item {
  .videoplayer {
    position: relative;
    height: 200px;
    overflow: hidden;
    background-color: #000;
    video {
      width: 100%;
      height: 200px;
    }
    .video-img {
      position: absolute;
      top: 0;
      left: 0;
    }
    .video-title {
      position: absolute;
      top: 0;
      left: 0;
      font-family: PingFangSC-Medium, serif;
      font-size: 18px;
      color: #fff;
      letter-spacing: 0;
      line-height: 0.48rem;
      z-index: 1;
      margin: 0.18rem 0.3rem 0.38rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
    .play-but {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1.16rem;
      height: 1.16rem;
      margin-left: -0.58rem;
      margin-top: -0.58rem;
      background-image: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png);
      background-size: contain;
    }
  }
  .video-info {
    overflow: hidden;
    padding: 10px 10px;
    background: rgb(255, 255, 255);
    .info-l {
      float: left;
      display: flex;
      align-items: center;
      height: 100%;
      margin-top: 5px;
      span {
        margin-left: 10px;
        line-height: 30px;
      }
    }
  }
}
</style>